<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>课程目标达成度计算平台</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="14">
				<el-table :data="courses" border highlight-current-row style="width: 100%">
					<el-table-column prop="courseTypeId" label="分类">
					</el-table-column>
					<el-table-column prop="courseTitle" label="名称">
					</el-table-column>
					<el-table-column prop="courseTerm" label="学期">
					</el-table-column>
					<el-table-column prop="courseCredit" label="学分">
					</el-table-column>
					<el-table-column prop="courseTeacher" label="授课教师">
					</el-table-column>
					<el-table-column prop="courseDesc" label="描述">
					</el-table-column>
					<el-table-column prop="courseTime" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
					        <el-button @click="showTarget(scope.row)" type="text" size="small">查看目标</el-button>
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="10">
				<el-table :data="targets" border highlight-current-row style="width: 100%">
					<el-table-column prop="targetTitle" label="标题">
					</el-table-column>
					<el-table-column prop="targetScore" label="分数">
					</el-table-column>
					<el-table-column prop="targetWeight" label="权重">
					</el-table-column>
					<el-table-column prop="targetTime" label="创建时间">
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		courses: [], 
		targets: [],
		selectCourse: null,
	}
	let vueMethods = {
		getCourses() {
			let that = this
			postRequst('/user/getCourses', that.query).then(function (resp) {
				that.courses = resp.rows
				if(resp.rows && resp.rows.length > 0){
					that.selectCourse = resp.rows[0]
					//that.targetForm.targetCourseId = resp.rows[0].courseId
					that.getTargets()
				}
			})
		},
		getTargets() {
			let that = this
			postRequst('/user/getTargets', {courseId: that.selectCourse.courseId}, true).then(function (resp) {
				that.targets = resp.rows
			})
		},
		showTarget(row){
			let that = this
			that.selectCourse = row
			that.getTargets()
		}
	}
	function vueCreated() {
		let that = this
		that.getCourses()
	}

	// 初始化VUE
	new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});
</script>

</html>